Add Charts into Our React App with Nivo — Heat Map

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Nivo.

Heat Map

Nivo comes with code to let us add a heat map into our React app.

To install the required packages, we run:

npm i @nivo/heatmap

Then we can add the chart by writing:

import React from "react";
import { ResponsiveHeatMap } from "@nivo/heatmap";

const data = [
  {
    country: "AD",
    "hot dog": 93,
    "hot dogColor": "hsl(354, 70%, 50%)",
    burger: 91,
    burgerColor: "hsl(313, 70%, 50%)",
    sandwich: 66,
    sandwichColor: "hsl(102, 70%, 50%)",
    kebab: 85,
    kebabColor: "hsl(114, 70%, 50%)",
    fries: 70,
    friesColor: "hsl(37, 70%, 50%)",
    donut: 50,
    donutColor: "hsl(126, 70%, 50%)",
    junk: 27,
    junkColor: "hsl(342, 70%, 50%)",
    sushi: 45,
    sushiColor: "hsl(185, 70%, 50%)",
    ramen: 31,
    ramenColor: "hsl(139, 70%, 50%)",
    curry: 22,
    curryColor: "hsl(165, 70%, 50%)",
    udon: 66,
    udonColor: "hsl(181, 70%, 50%)"
  },
  {
    country: "AE",
    "hot dog": 55,
    "hot dogColor": "hsl(304, 70%, 50%)",
    burger: 93,
    burgerColor: "hsl(14, 70%, 50%)",
    sandwich: 54,
    sandwichColor: "hsl(224, 70%, 50%)",
    kebab: 85,
    kebabColor: "hsl(328, 70%, 50%)",
    fries: 52,
    friesColor: "hsl(305, 70%, 50%)",
    donut: 86,
    donutColor: "hsl(252, 70%, 50%)",
    junk: 61,
    junkColor: "hsl(39, 70%, 50%)",
    sushi: 77,
    sushiColor: "hsl(122, 70%, 50%)",
    ramen: 85,
    ramenColor: "hsl(230, 70%, 50%)",
    curry: 79,
    curryColor: "hsl(176, 70%, 50%)",
    udon: 44,
    udonColor: "hsl(129, 70%, 50%)"
  },
  {
    country: "AF",
    "hot dog": 49,
    "hot dogColor": "hsl(349, 70%, 50%)",
    burger: 10,
    burgerColor: "hsl(319, 70%, 50%)",
    sandwich: 28,
    sandwichColor: "hsl(219, 70%, 50%)",
    kebab: 37,
    kebabColor: "hsl(83, 70%, 50%)",
    fries: 21,
    friesColor: "hsl(242, 70%, 50%)",
    donut: 96,
    donutColor: "hsl(62, 70%, 50%)",
    junk: 19,
    junkColor: "hsl(43, 70%, 50%)",
    sushi: 73,
    sushiColor: "hsl(107, 70%, 50%)",
    ramen: 31,
    ramenColor: "hsl(288, 70%, 50%)",
    curry: 21,
    curryColor: "hsl(176, 70%, 50%)",
    udon: 99,
    udonColor: "hsl(20, 70%, 50%)"
  }
];

const MyResponsiveHeatMap = ({ data }) => (
  <ResponsiveHeatMap
    data={data}
    keys={[
      "hot dog",
      "burger",
      "sandwich",
      "kebab",
      "fries",
      "donut",
      "junk",
      "sushi",
      "ramen",
      "curry",
      "udon"
    ]}
    indexBy="country"
    margin={{ top: 100, right: 60, bottom: 60, left: 60 }}
    forceSquare={true}
    axisTop={{
      orient: "top",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: -90,
      legend: "",
      legendOffset: 36
    }}
    axisRight={null}
    axisBottom={null}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "country",
      legendPosition: "middle",
      legendOffset: -40
    }}
    cellOpacity={1}
    cellBorderColor={{ from: "color", modifiers: [["darker", 0.4]] }}
    labelTextColor={{ from: "color", modifiers: [["darker", 1.8]] }}
    defs={[
      {
        id: "lines",
        type: "patternLines",
        background: "inherit",
        color: "rgba(0, 0, 0, 0.1)",
        rotation: -45,
        lineWidth: 4,
        spacing: 7
      }
    ]}
    fill={[{ id: "lines" }]}
    animate={true}
    motionConfig="wobbly"
    motionStiffness={80}
    motionDamping={9}
    hoverTarget="cell"
    cellHoverOthersOpacity={0.25}
  />
);

export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsiveHeatMap data={data} />
    </div>
  );
}

We have the data array with the number properties as the values to show.

And the properties with Color at the end has the background color for each square.

In the ResponsiveHeatMap component, we have the keys prop with the item names.

margin have the margins.

forceSquare makes the heatmap items square.

axisTop has the top axis settings.

orient has the text orientation. tickSize has the tick size.

tickPadding has the tick padding.

tickRotation has the text rotation angle.

legendOffset has the offset for the legend text in pixels.

axisRight and axisBottom are set to null since we don’t want to add them.

cellOpacity has the opacity of the heat map items.

cellBorderColor and labelTextColor have the cell border and label text colors respectively.

defs have the color scheme for the lines. We set it to patternLines to add the lines between the item.

fill have the fill color.

animate , motionConfig , motionStiffness , motionDamping have the settings for the animation when we hover over a cell.

cellHoverOthersOpacity have the opacity of the cells that we didn’t hover over when we hover a cell.

Then in App , we set the width and height so that we can show the chart.

Conclusion

We can add heat maps into our React app with Nivo.